<template>
  <div class="js-area-cascader">
    <el-cascader
      popper-class="myCascader"
      ref="jsCascaderRef"
      v-model="selectedArea"
      :options="areaOptions"
      :props="cascaderProps"
      placeholder="选择江苏省-市-区-镇"
      clearable
      size="medium"
      @change="handleAreaChange"
      style="width: 100%"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: "JiangsuAreaCascader",
  props: {
    defaultSelected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedArea: [],
      areaOptions: [],
      cascaderProps: {
        lazy: true,
        lazyLoad: this.loadChildData,
        checkStrictly: true,
        label: "nodeText",
        value: "nodeId",
        children: "children",
        loadingIcon: "el-icon-loading"
      }
    };
  },
  watch: {
    defaultSelected: {
      immediate: true,
      handler(newVal) {
        this.selectedArea = [...newVal];
      }
    },
    selectedArea(newVal) {
      if (newVal.length === 0 && this.$refs.jsCascaderRef) {
        this.$refs.jsCascaderRef.clearCheckedNodes();
      }
    }
  },
  mounted() {
    // this.initProvinceData();
  },
  methods: {
    // 初始化江苏省数据
    // initProvinceData() {
    //   setTimeout(() => {
    //     this.areaOptions = [
    //       {
    //         nodeId: "320000",
    //         nodeText: "江苏省",
    //         hasChildren: true // 明确标识有子级
    //       }
    //     ];
    //     // 触发组件重新渲染（关键修复）
    //     this.$forceUpdate();
    //   }, 500);
    // },

    // 懒加载子级数据（核心修复）
    loadChildData(node, resolve) {
      // 修复：同时兼容node.value和node.nodeId（不同版本Element可能有差异）
      if(node&&node.level==0){ //x
        this.areaOptions = [
          {
            nodeId: "320000",
            nodeText: "江苏省",
            levle:1,
            hasChildren: true // 明确标识有子级
          }
        ];
      }
      const parentId = node.value || node.nodeId;
      node.loading = true;
      setTimeout(() => {
        let childData = [];

        // 修复：确保parentId匹配逻辑正确
        switch (parentId) {
          // 江苏省 -> 市级数据（重点修复此分支）
          case "320000":
            childData = [
              { nodeId: "320100", nodeText: "南京市", level:2, hasChildren: true },
              { nodeId: "320200", nodeText: "无锡市", level:2, hasChildren: true },
              { nodeId: "320300", nodeText: "徐州市", level:2, hasChildren: true },
              { nodeId: "320400", nodeText: "常州市", level:2, hasChildren: true },
              { nodeId: "320500", nodeText: "苏州市", level:2, hasChildren: true },
              { nodeId: "320600", nodeText: "南通市", level:2, hasChildren: true },
              { nodeId: "320700", nodeText: "连云港市", level:2, hasChildren: true },
              { nodeId: "320800", nodeText: "淮安市", level:2, hasChildren: true },
              { nodeId: "320900", nodeText: "盐城市", level:2, hasChildren: true },
              { nodeId: "321000", nodeText: "扬州市", level:2, hasChildren: true },
              { nodeId: "321100", nodeText: "镇江市", level:2, hasChildren: true },
              { nodeId: "321200", nodeText: "泰州市", level:2, hasChildren: true },
              { nodeId: "321300", nodeText: "宿迁市", level:2, hasChildren: true }
            ];
            break;

          // 南京市 -> 区级数据
          case "320100":
            childData = [
              { nodeId: "320102", nodeText: "玄武区", level:3,hasChildren: true },
              { nodeId: "320104", nodeText: "秦淮区", level:3,hasChildren: true },
              { nodeId: "320105", nodeText: "建邺区", level:3,hasChildren: true },
              { nodeId: "320106", nodeText: "鼓楼区", level:3,hasChildren: true },
              { nodeId: "320111", nodeText: "浦口区", level:3,hasChildren: true }
            ];
            break;

          // 玄武区 -> 镇级数据
          case "320102":
            childData = [
              { nodeId: "320102001", nodeText: "梅园新村街道",level:3, hasChildren: false },
              { nodeId: "320102002", nodeText: "新街口街道",level:3, hasChildren: false },
              { nodeId: "320102003", nodeText: "玄武门街道",level:3, hasChildren: false }
            ];
            break;

          // 苏州市 -> 区级数据
          case "320500":
            childData = [
              { nodeId: "320505", nodeText: "虎丘区", level:3, hasChildren: true },
              { nodeId: "320506", nodeText: "吴中区", level:3, hasChildren: true },
              { nodeId: "320583", nodeText: "昆山市", level:3, hasChildren: true }
            ];
            break;

          // 昆山市 -> 镇级数据
          case "320583":
            childData = [
              { nodeId: "320583100", nodeText: "玉山镇", level:4,hasChildren: false },
              { nodeId: "320583101", nodeText: "巴城镇",level:4, hasChildren: false }
            ];
            break;
        }

        // 关键：确保子级数据格式正确（添加children属性）
        childData = childData.map(item => ({
          ...item,
          children: item.hasChildren ? [] : null, // 显式声明children，避免组件误判
          leaf:item.level==4
        }));

        resolve(childData);
        node.loading = false;
      }, 500);
    },

    handleAreaChange(val) {
      this.$emit("areaChange", val);
      
    }
  }
};
</script>

<style scoped>
.js-area-cascader {
  max-width: 500px;
}
</style>
<style>
/* // 添加全局样式  单选、多选影藏 */
.myCascader .el-cascader-panel .el-cascader-menu:first-child .el-scrollbar__wrap ul li label,
.myCascader .el-cascader-panel .el-cascader-menu:first-child .el-scrollbar__wrap ul li .el-checkbox {
  display: none !important;
}
</style>